<template>
  <div>
    <div ref="header" class="header">
      <van-icon @click="goback" size="18px" name="arrow-left" />
      <div class="title title2">
        <span>查看房源</span>
        <span>(不可修改)</span>
      </div>
      <div></div>
    </div>
    <div class="cutpart"></div>
    <div class="houseinfo">
      <van-cell title="城市" size="large" is-link>{{ value1 }}</van-cell>
      <van-cell title="楼层" size="large" is-link>
        {{ value2 }}
      </van-cell>
      <van-cell title="户型" size="large" is-link>
        {{ value3 }}
      </van-cell>
      <van-cell title="电梯" size="large" is-link>
        {{ value4 }}
      </van-cell>
      <van-cell class="pcell" title="面积" size="large">
        <div>{{sendval.coveredArea}}</div>
      </van-cell>
      <van-cell class="pcell" title="小区" size="large">
        <div>{{sendval.subdistrict}}</div>
      </van-cell>
    </div>
    <div class="morecontent">
      <div class="tipsword">
        更详尽房源信息 估价更精确
        <span>(选填)</span>
      </div>
      <div class="houseinfo">
        <van-cell class="pcell" title="建筑面积(平方米)" size="large">
          <div></div>
        </van-cell>
        <van-cell class="pcell" title="装修费用(元)" size="large">
          <div>{{sendval.decorateCost}}</div>
        </van-cell>
        <van-cell class="pcell" title="装修完成时间" size="large">
          {{ valuedate }}
        </van-cell>
      </div>
    </div>
    <div class="tipsword">
      不动产证照片
      <span>(或其他权属证明)</span>
    </div>
    <div class="picup">
      <img :src="sendval.houseProperty" alt="">
    </div>
    <div class="tipsword">
      身份证照片
      <span>(仅用于确认权属信息)</span>
    </div>
    <div class="picup" v-show="!pass">
    </div>
    <div v-show="pass" class="passreal">实名认证已通过</div>
    <div class="tipsword">房屋照片</div>
    <div class="picup">
      <img :src="item" alt="" v-for="(item,index) in arr" :key="index">
    </div>
    <div class="tipsword">房源验核资料</div>
    <div class="houseinfo">
      <van-cell title="验核码" size="large">
        <div>{{sendval.auditedCode}}</div>
        <template #right-icon>
          <van-icon @click="showask = true" class="ask" name="question-o" />
        </template>
      </van-cell>
      <div class="cell">
        <div class="lbox">出售价格</div>
        <div class="rbox">
          <span>{{sendval.listedPrice}}</span>
          <span>万</span>
        </div>
      </div>
      <van-cell class="pcell" title="联系人信息" size="large">
        <div>{{sendval.contactName}}</div>
      </van-cell>
      <van-cell
        class="pcell"
        title="请输入电话"
        label="将会以隐私号码形式展示"
        size="large"
      >
        <div>{{sendval.contactMobile}}</div>
      </van-cell>
      <van-cell
        title="可看房时间"
        size="large"
        label="与买家直接联系"
        is-link
        >{{ value5 }}</van-cell
      >
    </div>
    <div class="image"></div>
    <div class="showline">
      <div class>
        <img src="../../assets/buysell02.png" />
        <span>在线沟通</span>
      </div>
      <div class>
        <img src="../../assets/buysell03.png" />
        <span>快速匹配</span>
      </div>
      <div class>
        <img src="../../assets/buysell04.png" />
        <span>业主0费用</span>
      </div>
      <div class>
        <img src="../../assets/buysell05.png" />
        <span>全员服务</span>
      </div>
    </div>
    <div class="tipsword2">房源发布流程</div>
    <div class="line">
      <div class="one">
        <img src="../../assets/buysell06.png" />
        <div class>填写信息</div>
      </div>
      <div class="two">
        <img src="../../assets/buysell09.png" />
      </div>
      <div class="one">
        <img src="../../assets/buysell07.png" />
        <div class>上传验核</div>
      </div>
      <div class="two">
        <img src="../../assets/buysell09.png" />
      </div>
      <div class="one">
        <img src="../../assets/buysell08.png" />
        <div class>挂牌展示</div>
      </div>
    </div>
    <van-popup v-model="showask" @close="oncloseask">
      <div class="showpart2">
        <div>*验核码仅供查询核验结果使用</div>
        <div>*本地住建局官网可验核或咨询经纪人</div>
        <div>
          <div class="sline"></div>
          <div class>感谢信赖托付</div>
          <div class="sline"></div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import local from "../../utils/local";
const qiniu = require("qiniu-js");
import { dataURLtoFile, uuid } from "../../utils/help.js";
import { getToken, getVideoToken, ownerUphouse } from "../../apis/house";
import { idcardUp } from "../../apis/user.js";
import { _local } from "@/utils/storage.js";
import { getAreaList } from "@/apis/city";
import { getSecondHouseEdit, modifySecondHouse } from "@/apis/house";

export default {
  data() {
    return {
      arr: [],
      pass: false,
      items: [
        {
          text: "区域",
          children: [],
          disabled: true,
        },
      ],
      activeId: 0,
      activeIndex: 0,
      token: "",
      videotoken: "",
      sendval: {
        houseId: "",
        houseAcre: "",
        subdistrict: "",
        auditedCode: "",
        listedPrice: "",
        contactName: "",
        contactMobile: "",
        coveredArea: "",
        decorateCost: "",
        decorateFinishTime: "",
        seeApartmentTimeMin: "",
        seeApartmentTimeMax: "",
        sourceAdCode: "",
        houseProperty: "",
        houseImages: "",
        floor: "",
        hasElevator: "",
      },
      show: false,
      showask: false,
      showtime1: false,
      showtime2: false,
      showdate: false,
      TimeMin: 0,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      value5: "",
      valuedate: "",
      minDate: new Date(2000, 0, 1),
      maxDate: new Date(),
      columns1: [],
      columns2: ["低层1-7层", "中层8-16层", "高层17层及以上"],
      columns3: [
        "1室1厅1卫",
        "1室2厅1卫",
        "2室1厅1卫",
        "2室2厅1卫",
        "3室1厅1卫",
        "3室1厅2卫",
        "3室2厅1卫",
        "3室2厅2卫",
        "4室1厅1卫",
        "4室1厅2卫",
        "4室2厅1卫",
        "4室2厅2卫",
      ],
      columns4: ["有电梯", "无电梯"],
      choosetip: [],
      checked: false,
      checked2: false,
      num1: 1,
      num2: 0,
      num3: 0,
      num4: 0,
      num5: 0,
      timer: "",
      fileList1: [],
      fileList2: [],
      fileList4: [],
      upImg: [],
      surroundImg: [],
      citylist: [],
      flag: false,
      cansetInfo: true,
      idcardUrl: "",
      seeApartmentTimeMin: "",
      seeApartmentTimeMax: "",
    };
  },
  created() {
    if (_local.get("user").result.realNameAuthStatus == 1) {
      this.pass = true;
      this.flag = true;
    }
    this.getHouseInfo();
    this.getqntoken();
    this.getqnVideotoken();
    // if (local.get("setOwnerhouse")) {
    //   this.getsetInfo();
    // }
    this.timer = setInterval(() => {
      let a = Math.floor(Math.random() * 10);
      if (a === 0) {
        this.num1 = 1;
      } else {
        this.num1 = a;
      }
      this.num2 = Math.floor(Math.random() * 10);
      this.num3 = Math.floor(Math.random() * 10);
      this.num4 = Math.floor(Math.random() * 10);
      this.num5 = Math.floor(Math.random() * 10);
    }, 300);
  },
  beforeDestroy() {
    if (this.cansetInfo) {
      let obj = {
        sendval: {},
        upImg: [],
        idcardUrl: "",
        seeApartmentTimeMin: "",
        seeApartmentTimeMax: "",
      };
      obj.sendval = this.sendval;
      obj.idcardUrl = this.idcardUrl;
      obj.upImg = this.upImg;
      obj.seeApartmentTimeMin = this.seeApartmentTimeMin;
      obj.seeApartmentTimeMax = this.seeApartmentTimeMax;
      local.set("setOwnerhouse", JSON.stringify(obj));
    } else {
      local.del("setOwnerhouse");
    }
    clearInterval(this.timer);
  },
  methods: {
    getHouseInfo() {
      getSecondHouseEdit({ houseId: this.$route.query.houseId }).then((res) => {
        console.log("getSecondHouseEdit", res);
        this.value1 = res.result.city;
        this.value2 =
          res.result.floor == 1
            ? "低层1-7层"
            : res.result.floor == 2
            ? "中层8-16层"
            : "高层17层及以上";
        this.sendval.floor = res.result.floor;
        if (res.result.houseType) {
          if (res.result.houseType == "1") {
            this.value3 = "1室1厅1卫";
          } else if (res.result.houseType == "2") {
            this.value3 = "1室2厅1卫";
          } else if (res.result.houseType == "3") {
            this.value3 = "2室1厅1卫";
          } else if (res.result.houseType == "4") {
            this.value3 = "2室2厅1卫";
          } else if (res.result.houseType == "5") {
            this.value3 = "3室1厅1卫";
          } else if (res.result.houseType == "6") {
            this.value3 = "3室1厅2卫";
          } else if (res.result.houseType == "7") {
            this.value3 = "3室2厅1卫";
          } else if (res.result.houseType == "8") {
            this.value3 = "3室2厅2卫";
          } else if (res.result.houseType == "9") {
            this.value3 = "4室1厅1卫";
          } else if (res.result.houseType == "10") {
            this.value3 = "4室1厅2卫";
          } else if (res.result.houseType == "11") {
            this.value3 = "4室2厅1卫";
          } else if (res.result.houseType == "12") {
            this.value3 = "4室2厅2卫";
          }
        }
        if (res.result.hasElevator) {
          if (res.result.hasElevator == "1") {
            this.value4 = "有电梯";
          } else if (res.result.hasElevator == "2") {
            this.value4 = "无电梯";
          }
        }
        this.sendval.hasElevator = res.result.hasElevator;
        this.sendval.coveredArea = res.result.coveredArea;
        this.sendval.subdistrict = res.result.subdistrict;
        if (res.result.houseProperty) {
          let obj = { url: "", isImage: true };
          obj.url = res.result.houseProperty;
          this.fileList1.push(obj);
          this.sendval.houseProperty = obj.url;
        }
        if (res.result.houseImages.length != 0) {
          res.result.houseImages.forEach((e) => {
            let obj = { url: "", isImage: true };
            obj.url = e;
            this.fileList4.push(obj);
            this.arr.push(e);
            this.sendval.houseImages = this.arr.join(",");
          });
        }
        this.sendval.listedPrice = res.result.listedPrice;
        this.sendval.contactName = res.result.contactName;
        this.sendval.contactMobile = res.result.contactMobile;
        this.sendval.sourceAdCode = res.result.sourceAdCode;
        this.sendval.houseId = this.$route.query.houseId;
        this.sendval.auditedCode = res.result.auditedCode;
      });
    },
    goback() {
      this.$router.go(-1);
    },
    async getqntoken() {
      await getToken().then((res) => {
        local.set("qntoken", res.result.token);
        this.token = local.get("qntoken");
      });
    },
    async getqnVideotoken() {
      await getVideoToken().then((res) => {
        local.set("qnVideotoken", res.result.token);
        this.videotoken = local.get("qnVideotoken");
      });
    },
    toownerupagreement() {
      this.$router.push({ path: "/ownerupagreement" });
    },
    oncloseask() {
      this.showask = false;
    },

    showScroll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 70) {
        this.$refs.header.style.backgroundColor = "#fff";
        this.$refs.header.style.color = "#333";
      } else {
        this.$refs.header.style.backgroundColor = "";
        this.$refs.header.style.color = "#fff";
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.showScroll);
  },
  beforeUpdate() {
    if (this.checked2) {
      this.$router.push({ path: "/buyentrust" });
    }
  },
  destroyed() {
    window.removeEventListener("scroll", this.showScroll);
  },
};
</script>

<style scoped lang="less">
.title2{
  span:nth-child(1){
    font-size: 18px !important;
    font-weight: bold !important;
  }
}
.passreal {
  font-size: 13px;
  color: #45b7cb;
  margin: 0 15px 20px;
}
.header {
  position: fixed;
  left: 0;
  top: 0;
  padding: 10px 15px;
  z-index: 1000;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-size: 15px;
  color: #fff;
  .title {
    line-height: 25px;
    height: 25px;
    font-size: 18px;
    font-weight: bold;
    margin-left: 10px;
    span {
      font-size: 12px;
      font-weight: normal;
    }
  }
}
.cutpart {
  height: 150px;
  width: 100%;
  color: #fff;
  background: url("../../assets/buysell01.png") no-repeat 0px 0px;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 80px 0 0;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  .num {
    margin: 0 5px;
    font-size: 24px;
  }
}
.houseinfo {
  .van-cell__value {
    color: #666;
  }
  .ask {
    margin-top: 5px;
  }
  input {
    width: 150px;
    text-align: right;
    border: none;
  }
  /deep/.pcell {
    .van-cell__value {
      padding-right: 17px;
      color: #666;
    }
  }
  input {
    &::placeholder {
      color: #666;
    }
  }
  .cell {
    padding: 15px;
    font-size: 16px;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    justify-content: space-between;
    .telint {
      text-align: right;
      width: 100%;
      margin-right: 17px;
    }
    input {
      font-size: 15px;
    }
    .lbox {
      font-size: 16px;
      color: #323233;
      span {
        font-size: 12px;
        font-weight: normal;
        color: #999;
      }
    }
    .rbox {
      font-size: 15px;
      text-align: right;
      display: flex;
      color: #999;
      margin-right: 17px;
      span {
        color: #666;
      }
    }
  }
}
.picup {
  margin: 0 15px;
  img{
    width: 80px;
    height: 80px;
    margin-right: 5px;
  }
}
.tipsword {
  margin: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  span {
    font-size: 12px;
    font-weight: normal;
  }
}
.tipsword2 {
  margin: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-align: center;
}
.card {
  margin: 15px;
  border: 1px solid #45b7cb;
  padding: 15px 15px 5px;
  background-image: linear-gradient(to bottom, #fff, #eafdff);
  > div {
    /deep/ &:first-child {
      margin-bottom: 15px;
      display: flex;
      font-size: 19px;
      font-weight: bold;
      color: #45b7cd;
      span {
        margin-left: 5px;
      }
    }
    &:nth-child(2),
    &:last-child {
      font-size: 15px;
      margin-bottom: 10px;
      img {
        width: 13px;
        margin-right: 6px;
      }
    }
  }
}
.showline {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 30px 0;
  > div {
    margin-bottom: 15px;
    width: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 20px;
      height: 20px;
    }
    span {
      width: 80px;
      font-size: 16px;
      color: #333;
    }
  }
}
.line {
  margin: 0 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #333;
  padding-bottom: 130px;
  .one {
    text-align: center;

    img {
      width: 50px;
      height: 50px;
    }
  }
  .two {
    padding-bottom: 20px;
    img {
      width: 30px;
      height: 7px;
    }
  }
}
.btnpart {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  padding: 10px 0;
  border-top: 2px solid #f1f1f1;
  background-color: #fff;
  text-align: center;
  .cheak {
    padding-bottom: 5px;
    height: 20px;
    display: flex;
    align-items: center;
    margin: 3px 15px;
    font-size: 11px;
    color: #333;
    > span {
      margin-left: 3px;
    }
    .xy {
      color: #45b7cb;
    }
  }
  button {
    border: none;
    border-radius: 20px;
    height: 40px;
    width: 85%;
    color: #fff;
    background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
.showpart {
  width: 300px;
  background-color: #fff;
  text-align: center;
  padding: 10px 0;

  > div {
    &:first-child {
      color: #45b7cb;
      font-size: 16px;
      margin: 20px 0;
      font-weight: bold;
    }

    &:nth-child(2) {
      font-size: 14px;
      margin: 0 15px 30px;
    }

    &:nth-child(3) {
      padding: 0 0 20px;
      font-size: 13px;
      color: #999;
      display: flex;
      justify-content: center;

      .sline {
        height: 10px;
        width: 35px;
        border-bottom: 1px solid #999;
        margin: 0 5px;
      }
    }
  }
}
.showpart2 {
  width: 300px;
  background-color: #fff;
  text-align: center;
  padding: 10px 0;

  > div {
    &:nth-child(1) {
      padding-top: 20px;
    }
    &:nth-child(1),
    &:nth-child(2) {
      font-size: 14px;
      margin: 0 15px;
    }

    &:nth-child(3) {
      padding: 20px 0 20px;
      font-size: 13px;
      color: #999;
      display: flex;
      justify-content: center;

      .sline {
        height: 10px;
        width: 35px;
        border-bottom: 1px solid #999;
        margin: 0 5px;
      }
    }
  }
}
</style>
